<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html,
        #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1lSWkD21PxAosZWIxAG49pX6Wz98pR0i"></script>
    <script src="js/jquery.min.js"></script>
    <title>地图展示</title>
    <style>
        #allmap{
			width: 500px;
			height: 500px;
			margin: 0 auto;
		}
        .distance{
            width: 500px;
            margin: 0 auto;
            height: 30px;
            font-size: 22px;
            color: #fff;
            background: #a6c2de;
            line-height: 30px;
            text-align: center;
        }
	</style>
</head>

<body>
    <div class="distance"></div>
    <div id="allmap"></div>
</body>

</html>
<script>
    //ip获取位置
    /**
     * http://api.map.baidu.com/location/ip?ak=你的密钥&coor=bd09ll
     */
    //自定义回调函数，重点
    function jsonpcallback(rs) {
        // var rs = JSON.stringify(rs);
        var city = rs['content']['address_detail']['city'];
        city = city.toString().substr(0, city.length - 1);
        console.log(rs); //百度地图返回值
        //城市名称，去掉最后的“市”
        console.log(rs['content']['point']['x'], ',', rs['content']['point']['y']); //坐标
        console.log("牛pi不?(*￣︶￣)");
        // 百度地图API功能
        var map = new BMap.Map("allmap"); // 创建Map实例
        map.centerAndZoom(new BMap.Point(rs['content']['point']['x'], rs['content']['point']['y']), 5); // 初始化地图,设置中心点坐标和地图级别
        // 添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity(city); // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        // map.addEventListener("click", function(e){    
        //             var lat = e.point.lat;
        //             var lng = e.point.lng;
        //             alert('东经'+lng+ '北纬'+lat);
        //         });
        var myIcon = new BMap.Icon("images/posi.png", new BMap.Size(32, 32), {
            // 指定定位位置
            offset: new BMap.Size(10, 25),
            // 当需要从一幅较大的图片中截取某部分作为标注图标时，需要指定大图的偏移位置   
            imageOffset: new BMap.Size(0, 0) // 设置图片偏移  
        });
        var point_me = new BMap.Point(118.189, 24.491);
        var point = new BMap.Point(rs['content']['point']['x'], rs['content']['point']['y']);
        // 创建标注对象并添加到地图 
        var marker = new BMap.Marker(point, {
            icon: myIcon
        });
        var marker2 = new BMap.Marker(point_me, {
            icon: myIcon
        });
        map.addOverlay(marker);//绘制浏览者坐标
        map.addOverlay(marker2);//绘制觅兔先生坐标
        function Rad(d) {    
            return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
        }
        //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
        function GetDistance(lat1, lng1, lat2, lng2) {
                var radLat1 = Rad(lat1);
                var radLat2 = Rad(lat2);    
                var a = radLat1 - radLat2;    
                var b = Rad(lng1) - Rad(lng2);    
                var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));    
                s = s * 6378.137; // 地球半径，千米;    
                s = Math.round(s * 10000) / 10000; //输出为公里    
                s = Math.round(s * 1000) / 1; //单位修改为米,取整  
                return s;
        }  
        var mile = GetDistance(point.lat, point.lng, point_me.lat, point_me.lng);
        $(".distance").html(`我们的距离是${mile}米,o(╥﹏╥)o`);
    }
    $(function () {
        var url = 'https://api.map.baidu.com/location/ip';
        var data = {
            ak: "1lSWkD21PxAosZWIxAG49pX6Wz98pR0i",
            coor: "bd09ll",
            callback: 'jsonpcallback' //对应值为自定义回调函数名
        };
        //组合url
        var buffer = [];
        for (var key in data) {
            buffer.push(key + '=' + encodeURIComponent(data[key]));
        }
        var fullpath = url + '?' + buffer.join('&');
        console.log(fullpath);
        CreateScript(fullpath);
        //生成script
        function CreateScript(src) {
            var el = document.createElement('script');
            console.log(el);
            el.src = src;
            el.async = true;
            el.defer = true;
            document.body.appendChild(el);
        }
    })
</script>

